<template>
  <el-dialog
    v-if="dialogVisible"
    title="选择试验人员"
    class="peopleMultipleChoose"
    :visible.sync="dialogVisible"
    width="62%"
    :append-to-body="true"
    :before-close="handleClose"
  >
    <el-row style="height: 100%">
      <el-col :span="6" style="height: 100%">
        <pageCard :title-name="'部门树'" style="height: 100%" :type="'smallTitle'">
          <el-input v-model="filterText" placeholder="输入关键字进行过滤" />
          <el-tree
            ref="tree"
            :data="departmentTree"
            default-expand-all
            node-key="id"
            highlight-current
            :filter-node-method="filterNode"
            :props="defaultProps"
            :render-content="renderContent"
            @node-click="nodeClick"
          />
        </pageCard>
      </el-col>
      <el-col :span="18" style="height: 100%">
        <pageCard :title-name="'用户信息'" :type="'smallTitle'">
          <div class="tagDiv">
            <el-tag
              v-for="(item, tagIndex) in multipleSelection"
              :key="tagIndex"
              class="tagCSS"
              closable
              @close="closeTag(item)"
            >
              {{ item.userName }}
            </el-tag>
          </div>
          <div>
            <div class="topText">用户姓名/登录名：</div>
            <el-input v-model="search.bookingWords" placeholder="请输入搜索内容" class="searchInput">
              <el-button slot="append" icon="el-icon-search" @click="searchClick" />
            </el-input>
          </div>
          <div style="height: 45vh">
            <myTable
              ref="myTable"
              :row-key="'userId'"
              :table-label="tableLabel"
              :table-data="tableData"
              :table-total-size="tableTotalSize"
              :search-data="searchData"
              @getTableData="getTableData"
              @rowClickChange="rowClickChange"
              @handleSelectionChange="handleSelectionChange"
            />
            <pagination
              :table-total-size="tableTotalSize"
              :search-data="searchData"
              @getTableData="$refs.myTable.getTableData()"
            />
          </div>
        </pageCard>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose()">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getDepartmentNodeTree, getDepartmentUser } from '@/api/table'
import pageCard from '@/components/page/pageCard'
import myTable from '@/components/Table/index'
import pagination from '@/components/Table/pagination'
export default {
  name: 'PeopleMultipleChoose',
  components: {
    pageCard,
    myTable,
    pagination
  },

  data() {
    return {
      dialogVisible: false,
      // 部门树数据
      filterText: '',
      departmentTree: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      departmentId: null,
      // 表格数据
      search: {
        bookingWords: ''
      },
      searchData: {
        pageSize: 7,
        currentPage: 1,
        sort: {},
        params: {}
      },
      // table需要的数据
      tableData: [],
      tableLabel: [
        {
          type: 'selection',
          show: true,
          width: 55,
          minWidth: 50
        },
        {
          prop: 'loginName',
          label: '登录账号',
          width: 150,
          minWidth: 80,
          showOverflowTooltip: true
        },
        {
          prop: 'userName',
          label: '用户姓名',
          width: 80,
          minWidth: 80,
          showOverflowTooltip: true
        },
        {
          prop: 'email',
          label: '邮箱地址',
          width: 170,
          minWidth: 80,
          showOverflowTooltip: true
        },
        {
          prop: 'mobilTel',
          label: '手机号码',
          width: 120,
          minWidth: 80,
          showOverflowTooltip: true
        },
        {
          prop: 'telephone',
          label: '电话号码',
          width: 110,
          minWidth: 80,
          showOverflowTooltip: true
        },
        {
          prop: 'departmentName',
          label: '所属部门',
          minWidth: 80,
          width: 140,
          showOverflowTooltip: false
        }
        // {
        //   prop: 'testTypeId',
        //   label: '插槽',
        //   fixed: 'right',
        //   type: 'scope',
        //   width: 120,
        //   showOverflowTooltip: false
        // }
      ],
      multipleSelection: [],
      tableTotalSize: null,
      index: null, // formData的index
      indexx: null, // formItem的index
      rowData: {
        id: null,
        value: ''
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    // 进入此页面初始化函数
    is(indexx, tagData) {
      this.dialogVisible = true
      this.indexx = indexx
      this.multipleSelection = tagData
      this.$nextTick(() => {
        for (const item of this.multipleSelection) {
          this.$refs.myTable.$refs.tableComponent.toggleRowSelection(item)
        }
      })
      this.departmentTree = []
      getDepartmentNodeTree().then((res) => {
        this.departmentTree.push(res.data)
      })
    },
    // 提交函数
    submit() {
      this.$emit('submit', this.indexx, this.multipleSelection)
      this.handleClose()
    },
    // 关闭函数
    handleClose() {
      this.$parent.multipleChooseIndex = false
      this.dialogVisible = false
    },
    // 点击行回调函数
    rowClickChange(val) {
      this.rowData.id = val.userId
      this.rowData.value = val.userName
    },
    setCheckBox() {
      this.tableData.map((item) => {
        for (const tag of this.multipleSelection) {
          if (item.userId === tag.userId) {
            this.$refs.myTable.$refs.tableComponent.toggleRowSelection(item)
          }
        }
      })
    },
    getTableData(cab) {
      getDepartmentUser(this.searchData).then((res) => {
        this.tableData = res.data
        this.tableTotalSize = res.total_count
        // this.setCheckBox()
        cab(res.data)
      })
    },
    // tag关闭回调函数
    closeTag(tag) {
      let tagIndex = null
      // 因为删除tag时element的bug,第一次删除数据没挂载,会新增一个在最后,所以需要判断是否删除成功,如果失败就把重新删除一次,并把最后的删除
      for (const index in this.multipleSelection) {
        if (this.multipleSelection[index].userId === tag.userId) {
          tagIndex = index
        }
      }
      if (tagIndex !== null) {
        this.$refs.myTable.$refs.tableComponent.toggleRowSelection(this.multipleSelection[tagIndex])
        if (this.multipleSelection[tagIndex] && this.multipleSelection[tagIndex].userId === tag.userId) {
          this.$refs.myTable.$refs.tableComponent.toggleRowSelection(this.multipleSelection[tagIndex])
          this.$refs.myTable.$refs.tableComponent.toggleRowSelection(
            this.multipleSelection[this.multipleSelection.length - 1]
          )
        }
      }
    },
    // 选择checkbox函数
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.myTable.$refs.tableComponent.toggleRowSelection(row)
        })
      } else {
        this.$refs.myTable.$refs.tableComponent.clearSelection()
      }
    },
    // 电机checkbox回调函数
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 搜索
    searchClick() {
      this.searchData.currentPage = 1
      this.searchData.params['userName'] = this.search.bookingWords
      this.$refs.myTable.getTableData()
    },
    // 以下树函数
    nodeClick(node) {
      this.departmentId = node.id
      this.searchData.params['departmentId'] = node.id
      this.$refs.myTable.getTableData()
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys())
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3])
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    renderContent(createElement, { node, data, store }) {
      return createElement('span', [
        createElement('span', { attrs: { class: 'el-icon-office-building' } }),
        createElement('span', { attrs: { class: 'tree-spt' } }, node.label)
      ])
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../styles/pageTableTop.scss';
.peopleMultipleChoose {
  .tagDiv {
    border: 1px dashed #c5c7c9;
    width: 100%;
    height: 80px;
    margin-bottom: 8px;
    .tagCSS {
      margin: 5px;
    }
  }
  /deep/ .el-dialog__body {
    padding: 0px;
    height: 70vh;
  }
  /deep/ .el-dialog__title {
    font-size: 21px;
  }
  /deep/ .el-tree {
    border-right: none;
    height: 549px;
    .tree-spt {
      padding-left: 15px;
    }
    /deep/ .el-tree-node .is-current {
      background-color: #f5f7fa;
    }
    /deep/ .el-tree-node__expand-icon {
      float: right;
      margin-right: 1.5625rem !important;
    }
    /deep/ .el-tree-node__content {
      height: 2.5rem;
      line-height: 2.5rem;
      font-size: 16px;
    }
    /deep/ .el-tree--highlight-current /deep/ .el-tree-node.is-current > .el-tree-node__content {
      background: #ecf5ff;
    }
  }
  /deep/ .el-input-group__append {
    padding: 0px 10px;
  }
}
</style>
